<template>
<div class="descblock-root">
  <DecoTitle label="基本资料" type="round" class="title"></DecoTitle>
  <div class="cont">
    <div class="left">
      <Person :data="data.person"></Person>
    </div>
    <div class="right mainwrap innerscr">
      <div class="col" v-for="col in arrdata">
        <div class="line-root"
             :class="{active: line.active}"
             v-for="line in col">
          <div class="title">{{line.label}}</div>
          <div class="cont">
            <div class="line" 
                 v-for="item in line.contarr">
                 {{item}}
            </div>
          </div>
          <div class="more" 
               @click="line.active = !line.active"
               v-if="line.contarr.length > 1">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import Person from '../Topic/Person'
import DecoTitle from '../Topic/DecoTitle'
export default {
  name: 'descblock',
  components: {Person, DecoTitle},
  props: ['data'],
  data(){
    return {
      arrdata: [[], []]
    }
  },
  mounted() {
    let tc = 0
    for(let k in this.data.desc){
      let arr = this.data.desc[k].cont.trim().split('\n')
      this.data.desc[k].contarr = arr
      tc += arr.length
    }
    let lc = 0
    for(let k in this.data.desc){
      //这里要新建一个对象，否则vue的setter、getter绑定不上去
      let out = {
        ...this.data.desc[k],
        active: true
      }
      this.arrdata[lc<tc/2 ? 0 : 1].push(out)
      lc += out.contarr.length
    }
  }
}
</script>

<style lang="stylus" scoped>
.descblock-root
  padding 18px
  >.title
    margin-bottom 22px
  >.cont
    display flex
    >.left
      width 162px
      box-sizing border-box
      padding-left 6px
    >.right
      flex-grow 1
      height 288px
      overflow-y auto

.mainwrap
  display flex
  >.col
    width 48%
    margin-right 2%

.line-root
  font-size 16px
  line-height 35px
  height 36px
  position relative
  overflow hidden
  &:last-child
    margin-bottom 3px
  >.title
    color #9d9d9d
    float left
  >.cont
    >.line
      padding-left 72px
      white-space nowrap
      border-bottom 1px solid #244869
  >.more
    float right
    &:after
      position absolute
      background-color rgba(0,0,0,.8)
      bottom 1px
      right 0
      content '展开'
      font-size 12px
      color #59b3ff
      cursor pointer
  &.active
    height auto
    >.more:after
      content '收起'

</style>